<template>
  <el-container style="padding: 15px">
    <el-header>
      <el-form size="small" label-width="0px">
        <el-row type="flex" :gutter="0" align="middle">
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="addClientHandler">添加</el-button>
              <el-button type="success" @click="clientUploadHandler">上传</el-button>
              <el-button type="info" @click="addChannelHandler">添加渠道</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-form size="small" label-width="130px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-form-item label="委托方全称" label-width="90px">
              <el-input v-model="searchClientObj.clientFullName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方联系人姓名">
              <el-input v-model="searchClientObj.clientUserName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方联系人职务">
              <el-input v-model="searchClientObj.clientUserJob" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方联系人电话">
              <el-input v-model="searchClientObj.clientUserPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-form-item label="客户全称" label-width="90px">
              <el-input v-model="searchClientObj.customerFullName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户联系人姓名">
              <el-input v-model="searchClientObj.customerUserName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户联系人职务">
              <el-input v-model="searchClientObj.customerUserJob" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户联系人电话">
              <el-input v-model="searchClientObj.customerUserPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <el-form-item label="渠道" label-width="90px">
              <el-select v-model="searchClientObj.channelId" filterable>
                <el-option v-for="item in channelList" :key="item.id" :label="item.channelName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务来源" label-width="135px">
              <el-select v-model="searchClientObj.businessId" filterable>
                <el-option v-for="item in serviceFromList" :key="item.id" :label="item.businessName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" justify="center">
          <el-col :span="4">
            <el-form-item label-width="0">
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="listLoading" :data="clientList">
        <el-table-column label="委托方全称" prop="clientFullName" width="150px" />
        <el-table-column label="委托方联系人姓名" prop="clientUserName" width="150px" />
        <el-table-column label="委托方联系人职务" prop="clientUserJob" width="150px" />
        <el-table-column label="委托方联系人电话" prop="clientUserPhone" width="150px" />
        <el-table-column label="客户全称" prop="customerFullName" />
        <el-table-column label="客户联系人姓名" prop="customerUserName" width="150px" />
        <el-table-column label="客户联系人职务" prop="customerUserJob" width="150px" />
        <el-table-column label="客户联系人电话" prop="customerUserPhone" width="150px" />
        <el-table-column label="渠道" prop="channel" width="150px" />
        <el-table-column label="业务来源" prop="business" width="150px" />
        <el-table-column label="操作" width="150px" fixed="right">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="updateClientHandler(scope.row.clientId)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClientById(scope.row.clientId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
    <el-dialog
      :title="clientUpdateFormDialogTitle"
      :visible.sync="clientUpdateFormDialogVisible"
      width="50%"
      :before-close="clientUpdateFormDialogHandleClose"
    >
      <el-form size="small" label-width="130px">
        <el-divider>委托方信息</el-divider>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="委托方全称">
              <el-input v-model="clientObj.clientFullName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托方联系人姓名">
              <el-input v-model="clientObj.clientUserName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="委托方联系人职务">
              <el-input v-model="clientObj.clientUserJob" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托方联系人电话">
              <el-input v-model="clientObj.clientUserPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>客户信息</el-divider>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="客户全称">
              <el-input v-model="clientObj.customerFullName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户联系人姓名">
              <el-input v-model="clientObj.customerUserName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="客户联系人职务">
              <el-input v-model="clientObj.customerUserJob" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户联系人电话">
              <el-input v-model="clientObj.customerUserPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="渠道">
              <el-select v-model="clientObj.channelId">
                <el-option v-for="item in channelList" :key="item.id" :label="item.channelName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务来源">
              <el-select v-model="clientObj.businessId" filterable>
                <el-option v-for="item in serviceFromList" :key="item.id" :label="item.businessName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle" justify="center">
          <el-col :span="2">
            <el-form-item label-width="0px">
              <el-button type="primary" :loading="addOrupdateButtonLoading" @click="addOrUpdate">确定</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label-width="0px">
              <el-button @click="clientUpdateFormDialogHandleClose">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      title="批量上传客户信息"
      :visible.sync="clientUploadDialogVisible"
      width="50%"
      :before-close="clientUploadDialogCloseHandler"
    >
      <el-upload
        class="upload-demo"
        drag
        :headers="{ Authorization: token }"
        :action="uploadUrl"
        :before-upload="uploadBeforeHandler"
        :on-success="uploadSuccessHandler"
        accept="xls, xlsx"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
      </el-upload>
      <el-divider>注意事项</el-divider>
      <div>
        <p>1、上传请按照模板文件格式上传，获取模版文件请 <el-button type="text" size="small" :loading="downloadModuleFileButtonLoading" @click="downloadModuleFile">点击这里</el-button> </p>
        <p>2、在文件内容中不能存在 '%'，'¥'，'$'，'&'，'*'，'\' 特殊符号</p>
      </div>
    </el-dialog>

    <el-dialog
      title="批量上传渠道信息"
      :visible.sync="channelUploadDialogVisible"
      width="30%"
      :before-close="channelUploadDialogCloseHandler"
    >
      <el-upload
        class="upload-demo"
        drag
        :headers="{ Authorization: token }"
        :action="channelUploadUrl"
        :before-upload="uploadBeforeHandler"
        :on-success="uploadSuccessHandler"
        accept="xls, xlsx"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
      </el-upload>
      <el-divider />
      <p> 1、下载模版 <el-button type="text" :loading="channelUploadDialogVisibleDownloadButtonLoding" @click="downloadMode">请点这里</el-button> </p>
      <p> 2、请遵守上传规则 </p>
    </el-dialog>

  </el-container>
</template>

<script>
import {
  getClientList,
  searchClientList,
  clientGetById,
  deleteClientById,
  addClient,
  updateClient,
  downloadClientModuleFile,
  clientChannelNoPage, clientBusinessNoPage, downloadChannelExcelMode
} from '@/api/client'
import { validObj } from '@/utils/validate'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  data() {
    return {
      clientList: [],
      clientObj: {},
      searchClientObj: {},
      channelList: [],
      serviceFromList: [],

      currentPage: 0,
      sizePage: 10,
      totalPage: 0,

      clientUpdateFormDialogVisible: false,
      clientUpdateFormDialogTitle: '',

      addOrupdateButtonLoading: false,

      clientUploadDialogVisible: false,

      uploadUrl: process.env.VUE_APP_BASE_API + 'client/upload',

      channelUploadUrl: process.env.VUE_APP_BASE_API + '/client/channel/upload',

      downloadModuleFileButtonLoading: false,

      channelUploadDialogVisible: false,
      channelUploadDialogVisibleDownloadButtonLoding: false,
      businessUploadDialogVisible: false,

      listLoading: false
    }
  },

  computed: {
    ...mapGetters([
      'token'
    ])
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.getList()
      this.channelNoPageList()
      this.businessNoPageList()
    },

    getList() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const searchClientObj = this.searchClientObj
      this.listLoading = true
      if (validObj(searchClientObj)) {
        searchClientList(currentPage, sizePage, searchClientObj).then(res => {
          const data = res.data
          this.clientList = data.list
          this.totalPage = data.total
        }).finally(() => {
          this.listLoading = false
        })
      } else {
        getClientList(currentPage, sizePage).then(res => {
          const data = res.data
          this.clientList = data.list
          this.totalPage = data.total
        }).finally(() => {
          this.listLoading = false
        })
      }
    },

    channelUploadDialogCloseHandler() {
      this.channelUploadDialogVisible = false
    },

    handleSizeChange(val) {
      this.sizePage = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    clientUpdateFormDialogHandleClose() {
      this.clientUpdateFormDialogVisible = false
      this.clientUpdateFormDialogTitle = ''
    },

    addClientHandler() {
      this.clientObj = {}
      this.clientUpdateFormDialogTitle = '添加'
      this.clientUpdateFormDialogVisible = true
    },

    updateClientHandler(val) {
      clientGetById(val).then(res => {
        this.clientObj = res.data.client
        this.clientUpdateFormDialogTitle = '修改'
        this.clientUpdateFormDialogVisible = true
      })
    },

    addOrUpdate() {
      this.addOrupdateButtonLoading = true
      const clientObj = this.clientObj
      const id = clientObj.id
      if (id === undefined || id === null) {
        this.add(clientObj)
      } else {
        // 存在id则修改
        this.update(clientObj)
      }
    },

    deleteClientById(val) {
      this.$confirm('确定删除吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteClientById(val).then(res => {
          this.$message.success(res.message)
          this.getList()
        })
      })
    },

    add(val) {
      addClient(val).then(res => {
        this.$message.success(res.message)
        this.getList()
      }).finally(() => {
        this.addOrupdateButtonLoading = false
      })
    },
    update(val) {
      updateClient(val).then(res => {
        this.$message.success(res.message)
        this.getList()
      }).finally(() => {
        this.addOrupdateButtonLoading = false
      })
    },

    clientUploadDialogCloseHandler() {
      this.clientUploadDialogVisible = false
    },

    businessUploadDialogCloseHandler() {
      this.businessUploadDialogVisible = false
    },

    clientUploadHandler() {
      this.clientUploadDialogVisible = true
    },

    addChannelHandler() {
      this.channelUploadDialogVisible = true
    },

    addBusinessHandler() {
      this.businessUploadDialogVisible = true
    },

    uploadSuccessHandler(res, file, fileList) {

    },

    uploadBeforeHandler(file) {
      const size = file.size
      const kb = size / 1000
      if (kb > 500) {
        return false
      }

      return true
    },

    downloadModuleFile() {
      this.downloadModuleFileButtonLoading = true
      downloadClientModuleFile().then(res => {
        const url = window.URL.createObjectURL(new Blob([res], { type: res.type }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '模版文件.xlsx')
        document.body.appendChild(link)
        link.click()
        this.downloadModuleFileButtonLoading = false
      })
    },

    channelNoPageList() {
      clientChannelNoPage().then(res => {
        this.channelList = res.data.list
      })
    },

    businessNoPageList() {
      clientBusinessNoPage().then(res => {
        this.serviceFromList = res.data.list
      })
    },

    downloadMode() {
      this.channelUploadDialogVisibleDownloadButtonLoding = true
      downloadChannelExcelMode().then(res => {
        const url = window.URL.createObjectURL(new Blob([res], { type: res.type }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', new Date().getTime() + '.xlsx')
        document.body.appendChild(link)
        link.click()
        this.channelUploadDialogVisibleDownloadButtonLoding = false
      })
    }

  }
}
</script>

<style scoped>

</style>
